// //注册插件
// Vue.use(VueRouter)
// //创建路由对象
// const router=new VueRouter({
//     routes:[
//         {name:'home',path:'/',component:homeComponent}
//     ]
// })
// // 创建Vue实例，注册router对象
// new Vue({
//     router,
//     render:h=>h(App)
// }).$mount('#apps')

// import { construct } from "core-js/fn/reflect";

let _Vue = null;
export default class VueRouter {
  //调用install方法的时候，会传递Vue的构造函数
  static install(Vue) {
    //首先判断插件是否已经被安装，如果已经被安装，就不需要重复安装。   
    //1、判断当前插件是否已经被安装:  
    if (VueRouter.install.installed) {
      //条件成立，表明插件已经被安装，什么都不要做。
      return;
    }
    VueRouter.install.installed = true;
    //2、把Vue构造函数记录到全局变量中。
    _Vue = Vue;

    //3、把创建Vue实例时候传入的router对象注入到Vue实例上。
    _Vue.mixin({
      beforeCreate() {
        //在创建Vue实例的时候
        // 也就是new Vue()的时候，才会有$options这个属性，
        //组件中是没有$options这个属性的。
        if (this.$options.router) {
          _Vue.prototype.$router = this.$options.router;
          this.$options.router.init();
        }
      },
    });
  }
  constructor(options) {
    // options:路由规则
    this.options = options;
   // routeMap 结构是键值对 键:路由地址 值:组件 记录了路由地址和组件的对应关系
    this.routeMap = {};
    // current 记录当前路由地址
    this.data = _Vue.observable({
      current: "/",
    }); 
  }
  createRouteMap() {
    // 对路由中的this.option进行遍历 路由规则
    this.options.routes.forEach((route) => {
      this.routeMap[route.path] = route.component;
    });
  }
  initComponents(Vue) {
    // 创建对应组件 第一个参数是组件名字 第二个参数是对象 用于设置属性内容
    Vue.component("router-link", {
      // 接收url地址
      props: {
        to: String,
      },
      // template: '<a :href="to"><slot></slot></a>',
      render(h){
        return h('a',{
          attrs:{
            href:this.to,
          },
          on: {
            click: this.clickHandler,
          },
        },[this.$slots.default])
      },
      methods:{
        clickHandler(e){
          history.pushState({}, "", this.to);
          this.$router.data.current = this.to
          //阻止向服务器发送器。
          e.preventDefault();
        }
      }
    });
    const self = this
    Vue.component("router-view", {
      render(h) {
        //根据当前的路径从routeMap中查找对应的组件.
        const component = self.routeMap[self.data.current];
        //将组件转换成虚拟dom
        return h(component);
      },
    });
  }
  init() {
    this.createRouteMap();
    this.initComponents(_Vue);
    this.initEvent()
  }
  initEvent() {
    window.addEventListener("popstate", () => {
      // 箭头函数 解决this指向的问题 pathname获取的是第一个/开头后面的内容 login
      this.data.current = window.location.pathname;
    });
  }
}